//1.引入样式表
//公用样式 
require('../../assets/css/index.less');
require('../../assets/fonts/iconfont.css');
// 当前页面样式
require('./sportdata.less')

//2.引入工具函数 utils
const dom = require('../../utils/dom');
const https = require('../../utils/https');
const local = require('../../utils/local');
// echarts
import * as echarts from 'echarts';
var myChart = echarts.init(dom.getEle(".box1"));
var myChart1 = echarts.init(dom.getEle(".box2"));
// 3.当前页面的js
dom.ready(function () {
  dom.getEle("#Duration").innerHTML = local.get("userData").duration
  dom.getEle("#Calorie").innerHTML = local.get("userData").calorie
  console.log(local.get("sportData"));
  var option = {
    title: {
      text: '近7天运动时长',
      left: 'center'
    },
    tooltip: {},
    xAxis: {
      data: local.get("sportData").days.map(v => {
        return v.date.slice(5)
      }),
      axisTick: {
        alignWithLabel: true,
        interval: 0
      },
      axisLabel: {
        interval: 0
      }
    },
    yAxis: {
      // formatter: "{value}"
    },
    series: [
      {
        type: 'bar',
        data: local.get("sportData").days.map(v => {
          return v.sumDuration
        })
      }
    ],
    grid: {
      top: '30%',
      left: '15%',//原来是10%，修改为20%
      right: '2%',
      bottom: '24%',
    },
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  let type = []
  local.get("sportData").days.forEach(v => {
    v.exerciseData.forEach(j => {
      type.push(j.type)
    });
  })
  console.log(type);
  var option1 = {
    title: {
      text: '运动分类 ',
      subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: type.filter(v=>v==0).length, name: '跑步' },
          { value: type.filter(v=>v==1).length, name: '跳绳' },
          { value: type.filter(v=>v==2).length, name: '游泳' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  myChart1.setOption(option1);


  dom.addEvent("#back", () => {
    history.go(-1)
  })
})